<template>
    <div class="wrapper">
        <empty v-if="!posList.length"></empty>
        <van-list v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="posList">
            <div class="listDis">
                <div class="list" v-for="(item, index) in posList" :key="index" @click="openPopup(item)">
                    <div class="container">
                        <div style="display: flex; justify-content: center">
                            <img style="width: 50%" src="@/assets/posImg/dq.jpg" v-if="item.USE_TYPE == 'DQPOS'" />
                            <img style="width: 50%" src="@/assets/posImg/ct.jpg" v-else />
                        </div>
                        <div class="content">
                            <div class="title">
                                <span v-for="(item1, index1) in AgencySource" :key="index">
                                    <span v-if="item1.value == item.AGENCY_SOURCE">{{ item1.name }}</span>
                                </span>
                                - {{ item.NAME }}
                            </div>
                            <div class="number" v-if="!isYingkePoints">￥{{ item.PRICE }}/台</div>
                            <div class="number" v-else>{{ item.PRICE }}积分/台</div>
                        </div>
                    </div>
                </div>
            </div>
        </van-list>
        <!-- 购买弹窗 -->
        <van-popup :show="show" closeable position="bottom" @clickOverlay="closePopup" @clickCloseIcon="closePopup">
            <div class="myPopup">
                <div class="top">
                    <div class="left">
                        <!-- <img class="posImg" src="@/assets/posImg/AF68.png" alt="" /> -->
                        <img class="posImg" v-if="imgchoose" src="@/assets/posImg/dq.jpg" />
                        <img class="posImg" v-else src="@/assets/posImg/ct.jpg" />
                    </div>
                    <div class="right">
                        <div class="price" v-if="!isYingkePoints">
                            ￥
                            <span>{{ detail.PRICE }}</span>
                            /台
                        </div>
                        <div class="price" v-else>
                            <span>{{ detail.PRICE }}</span>
                            积分/台
                        </div>
                        <div class="name">{{ detail.AGENCY_SOURCE === 'LS' ? '乐刷' : '合利宝' }} - {{ detail.NAME }}</div>
                    </div>
                </div>
                <div class="center">
                    <div
                        v-for="(item, index) in nums"
                        @click="chooseNum(index)"
                        :key="item"
                        :class="index === numIndex ? 'active quick' : 'quick'"
                    >
                        {{ item }}台
                    </div>
                </div>
                <div class="bottom">
                    <div class="left">数量</div>
                    <div class="right" v-if="nums.length">
                        <van-stepper input-width="50px" :step="nums[numIndex]" :min="nums[numIndex]" v-model="value" disable-input />
                    </div>
                </div>
                <div class="footer">
                    <div class="total">
                        共
                        <span>{{ value }}</span>
                        台, 合计：
                        <span v-if="!isYingkePoints">￥{{ (value * detail.PRICE).toFixed(2) }}</span>
                        <span v-else>{{ value * detail.PRICE }}积分</span>
                    </div>
                    <div class="button" @click="confirm">确认</div>
                </div>
            </div>
        </van-popup>
    </div>
</template>
<script>
import { posListApi } from '@/api/orderPos'
import { findAgencySource } from '@/api/agent'
export default defineComponent({
    name: 'posList',
    setup() {
        const store = useStore()
        const router = useRouter()
        const state = reactive({
            posList: [], //  可购买终端数量
            isYingkePoints: null, //是否是盈客积分
            loading: false,
            finished: false,
            nums: [], // 采集包数量 集合
            numIndex: 0, // 采集包数量 集合
            value: 0, // 采集包数量 集合
            show: false, // 购买机具弹窗是否显示
            detail: {}, // 购买的某个机具详情
            imgchoose: true,
            AgencySource: []
        })
        onActivated(() => {
            posListApi({}).then(res => {
                // state.posList = [...res.object.list]
                state.posList = res.object.list.sort(function (a, b) {
                    // 把1台起售的  放在前边
                    return a.PACK_GROUP - b.PACK_GROUP
                })
                state.isYingkePoints = res.object.isYingkePoints
                state.finished = true
            })
        })

        const openPopup = item => {
            state.imgchoose = item.USE_TYPE === 'DQPOS' ? true : false
            state.detail = item
            state.nums = item.PACK_GROUP.split(',')
            state.value = state.nums[0]
            state.show = true
        }
        const closePopup = () => {
            state.detail = {}
            state.show = false
        }
        const gatFindAgencySource = () => {
            findAgencySource({}).then(res => {
                state.AgencySource = res.object
            })
        }
        gatFindAgencySource()
        const confirm = () => {
            store.dispatch('posOrder/GetNum', state.value)
            store.dispatch('posOrder/GetDetail', state.detail)
            console.log(state.isYingkePoints, '000000000000000')
            if (!state.isYingkePoints) {
                router.push({
                    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定
                    path: '/confirmOrder',
                    query: {
                        agencySource: state.detail.AGENCY_SOURCE
                    }
                })
            } else {
                router.push({
                    //传递参数使用query的话，指定path或者name都行，但使用params的话，只能使用name指定
                    path: '/confirmOrderIntegral',
                    query: {
                        isYingkePoints: state.isYingkePoints,
                        agencySource: state.detail.AGENCY_SOURCE
                    }
                })
            }
        }
        // 选择机具数量
        const chooseNum = index => {
            state.numIndex = index
            state.value = state.nums[index]
        }
        //要return出去 否则无法更新视图
        return {
            ...toRefs(state),
            openPopup,
            chooseNum,
            confirm,
            closePopup
        }
    }
})
</script>

<style lang="scss" scoped>
.wrapper {
    padding: 10px;
    .listDis {
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
    }
    .list {
        width: calc(50% - 10px);
        padding: 10px;
        border-radius: 10px;
        background: #ffffff;
        margin-bottom: 10px;
        box-sizing: border-box;
        img {
            width: 100%;
        }
        .content {
            .title {
                font-size: 14px;
                padding: 20px 0;
                font-family: SimHei;
                font-weight: 400;
                color: #000000;
                opacity: 1;
            }
            .number {
                font-size: 14px;
                font-family: SimHei;
                font-weight: 400;
                color: #fb713e;
                opacity: 1;
                margin-bottom: 10px;
            }
        }
    }
    .myPopup {
        padding: 20px;
        .top {
            display: flex;
            align-items: center;
            .left {
                .posImg {
                    width: 50px;
                    // height: 90px;
                }
            }
            .right {
                flex: 1;

                font-family: Microsoft YaHei;
                box-sizing: border-box;
                padding: 10px;
                span {
                    font-size: 26px;
                }
                .price {
                    font-size: 14px;
                    color: #66d6ff;
                    opacity: 1;
                }
                .name {
                    margin-top: 10px;
                }
            }
        }
        .center {
            padding: 20px 0;
            display: flex;
            flex-wrap: wrap;
            .quick {
                background: #f5f5f5;
                opacity: 1;
                margin: 10px 20px 0 0;
                padding: 5px 10px;
                border: 1px solid #f5f5f5;
                border-radius: 5px;
            }
            .active {
                border: 1px solid #66d6ff;
                opacity: 1;
                background-color: #ffffff;
                border-radius: 5px;
            }
        }
        .bottom {
            display: flex;
            justify-content: space-between;
            margin-bottom: 100px;
            .right {
                transform: scale(0.9);
            }
        }
        .footer {
            padding-top: 20px;
            border-top: 1px solid #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 14px;
            .button {
                background: #66d6ff;
                padding: 10px 20px;
                border-radius: 6px;
                color: #ffffff;
            }
            span {
                color: #ff0000;
            }
        }
    }
}
</style>
